<template>
  <!-- 新碟上架下方的 全部-华语-欧美-韩国-日本 组件 -->
  <div class="disc">
    <div class="item" v-for="(i, index) in 35" :key="index">
      <div class="main">
        <img src="./img/1.jpg" />
        <a class="mask" href="javascript:;" title="爱情把戏"></a>
      </div>
      <a class="icon" title="播放" v-show="true"></a>
      <p class="desc text-ellipsis">
        <a href="javascript:;" title="爱情把戏">爱情把戏</a>
      </p>
      <p class="name text-ellipsis">
        <a href="javascript:;" title="Lambert / 阿达娃">Lambert / 阿达娃</a>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "disc",
};
</script>

<style lang="scss" scoped>
.disc {
  width: 100%;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .item {
    width: 153px;
    height: 200px;
    font-size: 12px;
    position: relative;
    .main {
      width: 100%;
      height: 130px;
      position: relative;
      .mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 153px;
        height: 130px;
        background: url("@/assets/coverall.png") no-repeat;
        background-position: 0 -845px;
      }
    }
    .icon {
      position: absolute;
      width: 28px;
      height: 28px;
      right: 30px;
      bottom: 75px;
      background: url("@/assets/iconall.png") no-repeat;
      background-position: 0px -140px;
      cursor: pointer;
      &:hover {
        background-position: 0px -170px;
      }
    }
    .desc {
      line-height: 24px;
      margin-top: 5px;
      font-size: 14px;
      a {
        color: #000;
        &:hover {
          text-decoration: underline;
        }
      }
    }
    .name {
      line-height: 15px;
      text-align: left;
      a {
        color: #666;
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}
</style>